<template>
	<view :style="Theme">
		<uni-nav-bar leftIcon="left" :fixed="true" title="设置" />
		<view class="menu">
			<menuList leftIcon="icon-edit" menuName="修改信息" rightIcon="icon-right" @onClick="navTo('/my/changeInfo')" @clickRight="navTo('/my/changeInfo')"  />
			<menuList leftIcon="icon-change" menuName="修改密码" rightIcon="icon-right" @onClick="navTo('/my/changePassword')" @clickRight="navTo('/my/changePassword')" />
			<menuList leftIcon="icon-purge" menuName="清除缓存" rightIcon="icon-right" @onClick="clearStorage" @clickRight="clearStorage" />
			<menuList leftIcon="icon-theme" menuName="主题切换" rightIcon="icon-right" @onClick="showColorModal" @clickRight="showColorModal" />
		</view>
		<view class="exitBtn" @click="exitLogin">退出登录</view>
		<!-- 选择颜色模态框 -->
		<Modal title="选择主题" v-model:showModal="themeModal">
			<view class="themePadding">
				<view class="themeBox">
					<view v-for="(item,index) in themes" :key="index" @click="themeChange(index)" class="theme" :style="{'background-color':item.value[0].value}">
					</view>
				</view>
			</view>
		</Modal>
		
	</view>
</template>

<script setup>
	const { Theme, getTheme, onShow } = useTheme()
	const { proxy } = getCurrentInstance()
	import menuList from '@/components/menuList/menuList.vue'
	import Modal from '@/components/Modal/Modal.vue'
	import * as theme from '@/common/theme.js'
	
	onLoad(() => {
		
	})
	
	onShow(() => {
		
	})
	
	// 页面跳转
	const navTo = path => {
		proxy.sjuNav.navigateTo(path)
	}
	
	// 页面跳转
	const clearStorage = () => {
		proxy.sjuAlert.showConfirm('是否确认清除数据', ()=>{
			// 确认
			proxy.sjuLogin.clearAll()
		}, ()=>{
			// 取消
			
		}, '提示')
	}
	
	const themeModal = ref(false)
	// 显示弹窗
	const showColorModal = () => {
		themeModal.value = true
	}
	
	const themes = ref(theme.themeList)
	// 主题切换
	const themeChange = index => {
		themeModal.value = false
		useThemeStore().setTheme(themes.value[index])
		getTheme()
	}
	// 退出登录
	const exitLogin = () => {
		proxy.sjuAlert.showConfirm('是否确认退出登录', ()=>{
			// 确认
			proxy.sjuLogin.clearAll()
			proxy.sjuNav.switchTab('/tab/index')
		}, ()=>{
			// 取消
			
		}, '提示')
	}
	
</script>

<style lang="scss">
	.menu{
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		background-color: var(--accent-bg-color);
	}
	
	.exitBtn{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
		background-color: var(--accent-bg-color);
	}
	
	// 主题弹窗内容
	.themePadding{
		padding: 20rpx;
		background-color: #fff;
		.themeBox{
			display: flex;
			flex-wrap: wrap;
			.theme {
				width: calc((100% - 100rpx)/5);
				height: 0;
				padding-bottom: calc((100% - 100rpx)/5);
				margin: 10rpx;
				border-radius: 10rpx;
				text-align: center;
			}
		}
	}
	
</style>
